import React, {useState} from 'react';
import PropTypes from 'prop-types';
import {Input, Message, Form, Divider} from '@alifd/next';

import {useInterval} from './utils';
import styles from './index.module.scss';
import {IDataSource} from "@/pages/Login/components/LoginBlock";
import {config, request,useHistory} from "ice";
const {Item} = Form;

export interface RegisterProps {
  email: string;
  password: string;
  rePassword: string;
  phone: string;
  code: string;
}

export default function RegisterBlock() {

  const history = useHistory();

  const [postData, setValue] = useState({
    email: '',
    password: '',
    rePassword: '',
    phone: '',
    code: '',
  });

  const [isRunning, checkRunning] = useState(false);
  const [second, setSecond] = useState(59);

  useInterval(() => {
    setSecond(second - 1);
    if (second <= 0) {
      checkRunning(false);
      setSecond(59);
    }
  }, isRunning ? 1000 : null);

  const formChange = (value: RegisterProps) => {
    setValue(value);
  };

  const sendCode = (values: RegisterProps, errors: []) => {
    if (errors) {
      return;
    }
    // get values.phone
    checkRunning(true);
  };

  const checkPass = (rule: {}, values: string, callback: (errors?: string) => void) => {
    if (values && values !== postData.password) {
      return callback('密码不一致');
    } else {
      return callback();
    }
  };

  const handleSubmit = (values: RegisterProps, errors: []) => {
    if (errors) {
      console.log('errors', errors);
      return;
    }
    login(values, 1);
  };

  async function login(values: IDataSource, type: number) {
    try {
      const data = await request({
        url: `/v1/auth/mobile/register`,
        method: 'post',
        data: values,
      });

      // eslint-disable-next-line eqeqeq
      if (data.statusCode == 200) {
        // 进行跳转
        Message.success('注册成功');
        history.push(config.loginPage);
      }
    } catch (error) {
      console.error(error);
    }
  }

    return (
    <div className={styles.RegisterBlock}>
      <div className={styles.innerBlock}>
        {/*<a href="#">*/}
        {/*  <img*/}
        {/*    src='/public/favicon.png'*/}
        {/*  />*/}
        {/*</a>*/}
        {/*<p className={styles.desc}>*/}
        {/*  注册账号*/}
        {/*</p>*/}


        <span className={styles.desc}>注册账号</span>
        <Divider direction="ver"/>
        <img
          // className={styles.logo}
          className={styles.desc}
          src='public\favicon.png'
          alt="logo"
        />

        <p className={styles.desc}>
          {/*注册账号*/}
        </p>

        <Form
          value={postData}
          onChange={formChange}
          size="large"
        >
          {/*<Item format="email" required requiredMessage="必填">*/}
          {/*  <Input*/}
          {/*    name="email"*/}
          {/*    size="large"*/}
          {/*    maxLength={20}*/}
          {/*    placeholder="邮箱"*/}
          {/*  />*/}
          {/*</Item>*/}

          <Item format="tel" required requiredMessage="必填" asterisk={false}>
            <Input
              name="mobileNum"
              size="large"
              innerBefore={<span className={styles.innerBeforeInput}>+86<span className={styles.line}/></span>}
              maxLength={20}
              placeholder="手机号"
            />
          </Item>

          <Item required requiredMessage="必填">
            <Input.Password
              name="password"
              size="large"
              htmlType="password"
              placeholder="至少8位密码，区分大小写"
            />
          </Item>

          {/*<Item required requiredTrigger="onFocus" requiredMessage="必填" validator={checkPass}>*/}
          {/*  <Input.Password*/}
          {/*    name="rePassword"*/}
          {/*    size="large"*/}
          {/*    htmlType="password"*/}
          {/*    placeholder="确认密码"*/}
          {/*  />*/}
          {/*</Item>*/}


          <Item required requiredMessage="必填">
            {/*<Input*/}
            {/*  name="code"*/}
            {/*  size="large"*/}
            {/*  innerAfter={<span className={styles.innerAfterInput}>*/}
            {/*    <span className={styles.line}/>*/}
            {/*    <Form.Submit*/}
            {/*      text*/}
            {/*      type="primary"*/}
            {/*      style={{width: 64}}*/}
            {/*      disabled={!!isRunning}*/}
            {/*      validate={['phone']}*/}
            {/*      onClick={sendCode}*/}
            {/*      className={styles.sendCode}*/}
            {/*    >*/}
            {/*      {isRunning ? `${second}秒后再试` : '获取验证码'}*/}
            {/*    </Form.Submit>*/}
            {/*  </span>}*/}
            {/*  maxLength={20}*/}
            {/*  placeholder="验证码"*/}
            {/*/>*/}
          </Item>
          <Item>
            <Form.Submit
              type="primary"
              onClick={handleSubmit}
              className={styles.submitBtn}
              validate
            >
              注册账号
            </Form.Submit>
          </Item>
          <Item style={{textAlign: 'center'}}>
            <a href="/" className={styles.link}>使用已有账号登录</a>
          </Item>
        </Form>
      </div>
    </div>
  );
}

RegisterBlock.propTypes = {
  // eslint-disable-next-line react/no-unused-prop-types
  value: PropTypes.object,
};

RegisterBlock.defaultProps = {
  value: {},
};
